// components/ResultsDisplay.tsx
'use client';

import { Option } from '@/lib/api';

interface ResultsDisplayProps {
  options: Option[];
  topic: string;
}

export default function ResultsDisplay({ options, topic }: ResultsDisplayProps) {
  const totalVotes = options.reduce((sum, option) => {
    const votes = Number(option.votes) || 0;
    return sum + votes;
  }, 0);

  return (
    <div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-2xl font-bold mb-6 text-gray-800 text-center">投票结果</h2>
      
      {/* 表格容器 */}
      <div className="border-2 border-gray-300 rounded-lg overflow-hidden">
        {/* 表头 */}
        <table className="w-full border-collapse">
          <thead>
            <tr className="bg-gray-50 border-b-2 border-gray-300">
              <th className="p-3 font-semibold text-gray-700 border-r border-gray-300">选项</th>
              <th className="p-3 font-semibold text-gray-700 text-right">票数</th>
            </tr>
          </thead>
          <tbody>
            {options.map((option) => {
              const votes = Number(option.votes) || 0;
              const percentage = totalVotes > 0 ? ((votes / totalVotes) * 100).toFixed(1) : '0';
              
              return (
                <tr key={option.id} className="border-b border-gray-200 last:border-b-0">
                  {/* 选项文本 */}
                  <td className="p-3 text-gray-800 font-medium w-40">{`${option.text}: `}</td>
                  
                  {/* 票数信息 */}
                  <td className="p-3 text-blue-600 font-semibold text-right">
                    ——{votes} 票 ({percentage}%)
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      
      {/* 统计信息 */}
      <div className="mt-4 p-3 bg-gray-50 rounded-lg">
        <p className="text-sm text-gray-600">总投票数: {totalVotes}</p>
      </div>
    </div>
  );
}